<template>
	<view>
		<view class="block">
			<view class="orderinfo">
				<view class="row">订单编号：{{orderId}}</view>
				<view class="row">订单金额：{{price}}</view>
			</view>
		</view>
		<view class="block">
			<view class="title">请选择支付方式</view>
			<radio-group @change="radioChange">
				<view class="pay-list">
					<view class="row">
						<view class="left">
							<image src="../../../../static/images/icons/alipay.png" mode=""></image>
						</view>
						<view class="center">支付宝支付</view>
						<view class="right">
							<radio value="1" checked="true" color="#354E44"/>
						</view>
					</view>
					<view class="row">
						<view class="left">
							<image src="../../../../static/images/icons/wxpay.png" mode=""></image>
						</view>
						<view class="center">微信支付</view>
						<view class="right">
							<radio value="2" color="#354E44"/>
						</view>
					</view>
				</view>
			</radio-group>
		</view>
		
		<view class="pay">
			<view class="btn" @click="goMoney">立即支付</view>
		</view>
	</view>
</template>

<script>
	import { payConfirm } from "../../../../api/home/order/pay/pay.js"
	export default {
		data() {
			return {
				orderId:'',
				price:'',
				// 支付方式，1为支付宝，2为微信
				payType:1
			};
		},
		methods:{
			// 按钮事件
			radioChange(e){
				// console.log(e)
				this.payType = e.detail.value;
			},
			// 支付
			goMoney(){
				var _this = this;
				payConfirm({
					orderId:this.orderId,
					payType:this.payType
				}).then(res=>{
					console.log(res);
					if(res.success==true){
						
						uni.showToast({
						    title: '支付成功',
						    icon: 'success',
							duration:1000,
							success: res=>{
								setTimeout(function(){
									uni.navigateTo({
										url:`../money/money?price=${_this.price}`
									})
								},1000)
							}
						});
						
					}
				})
			}
		},
		onLoad(options) {
			this.orderId = options.orderId;
			this.price = options.price;
			// console.log(this.orderId,this.price)
		}
	}
</script>

<style lang="scss" scoped>
	.block {
		width: 94%;
		padding: 0 3% 40rpx 3%;
		// 上半部分订单编号，价格
		.orderinfo {
			width: 100%;
			border-bottom: solid 1rpx #eee;
			 .row {
				 height: 90rpx;
				 line-height: 90rpx;
				 color: #7d7d7d;;
			 }
		}
		// 中间部分选择支付方式
		.title {
			width: 100%;
			font-size: 34rpx;
		}
		.pay-list {
			width: 100%;
			border-bottom: solid 1rpx #eee;
			 .row {
				 width: 100%;
				 height: 120rpx;
				 display: flex;
				 align-items: center;
				  .left {
					  width: 100rpx;
					  flex-shrink: 0;
					  display: flex;
					  align-items: center;
					   image {
						   width: 80rpx;
						   height: 80rpx;
						   background-color: initial;
					   }
				  }
				  .center {
					  width: 100%;
					  font-size: 30rpx;
				  }
				  .right {
					  width: 50px;
					  flex-shrink: 0;
					  display: flex;
					  justify-content: flex-end;
				  }
			 }
		}
	}
	 .pay {
		 margin-top: 20rpx;
		 width: 100%;
		 display: flex;
		 justify-content: center;
		 flex-wrap: wrap;
		 .btn {
			 width: 70%;
			height: 80rpx;
			border-radius: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: #354e44;
			box-shadow: 0rpx 4rpx 10rpx rgba(0,0,0,.2);
		 }
	 }
</style>
